<template>
  <el-dialog v-model="dialogInfo.visible" :title="dialogInfo.title" :width="dialogInfo.width" align-center>
    <el-form ref="formRef" label-position="left" :model="formModel" :rules="formRules" label-width="120px">
      <div class="app_card mb-2 pt-4  pb-4">

        <div style="max-height:500px; overflow-y:auto">
          <el-tree ref="treeRef" :data="resourceStore.permissionsList" show-checkbox default-expand-all node-key="id" highlight-current :default-checked-keys="distributionList" />
        </div>
      </div>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="info" plain @click="onCancel()">取消</el-button>
        <el-button type="primary" @click="onSubmit()">提交</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
/**
 * 管理员编辑组件
 */
import { ref } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import EsAjax from '@/utils/EsAjax';
import ApiUrls from '@/apis/index';


import useResourceStore from '@/stores/useResourceStore';

// ======================================================
//                      变量声明
// ======================================================
const resourceStore = useResourceStore();




// ======================================================
//                      变量声明
// ======================================================

// emit
const emit = defineEmits(['success']);
// 表单数据
const formAttrs = {
  Id: '',
  Ids: [],
};
const distributionList = ref([])
const formModel = ref(Object.assign({}, formAttrs));
// 弹窗信息
const dialogInfo = ref({
  visible: false,
  title: '',
  width: '600px',
})
// 表单组件的引用实例
const formRef = ref(null);
const treeRef = ref(null);
// 菜单选项数据
const optionsOfMenus = ref([]);
// 表单校验规则
const formRules = ref({
  // title: [
  //   { required: true, message: '请填写标题', trigger: 'blur' },
  //   { min: 3, max: 50, message: '用户名长度 3 - 50', trigger: 'blur' }
  // ],
  // status: [
  //   { required: true, message: '请选择状态', trigger: 'blur' }
  // ]
})

// ======================================================
//                      点击操作
// ======================================================

// 点击提交按钮
const onSubmit = () => {
  formModel.value.Ids = getCheckedKeys();
  console.log('submit!', formModel.value);
  formRef.value.validate((valid, fields) => {
    if (!valid) {
      console.log('表单校验失败：', fields);
      return;
    }

    let distributio = {
      Id: formModel.value.Id,
      Ids: formModel.value.Ids.toString()
    };


    EsAjax.post(ApiUrls.roleAllocate, distributio).then(res => {
      if (res.data.code != 200) {
        ElMessage.warning(res.data.data + res.data.msg);
        return;
      }
      dialogInfo.value.visible = false;
      emit('success');
    }).catch(err => {
      ElMessage.error('网络错误：' + err.message);
    })
  })
}

// 点击重置表单按钮
const onReset = () => {
  ElMessageBox.confirm('确定要重置表单数据吗？').then(() => {
    formRef.value.resetFields();
    resetChecked();
  }).catch(() => { })
}

// 点击取消按钮
const onCancel = () => {
  dialogInfo.value.visible = false;
}
const getCheckedKeys = () => {
  return treeRef.value.getCheckedKeys(false);
}
const setCheckedKeys = (values) => {
  treeRef.value.setCheckedKeys(values, false)
  // treeRef.value!.setCheckedKeys([3], false)
}
const resetChecked = () => {
  treeRef.value.setCheckedKeys([], false)
}
// ======================================================
//                      处理事件
// ======================================================

// 加载数据
const show = async (id, title, width = '600px') => {
  dialogInfo.value.title = title;
  dialogInfo.value.width = width;
  dialogInfo.value.visible = true;
  distributionList.value = [];

  // 加载详情数据
  if (id) {
    formModel.value.Id = id



    EsAjax.post(ApiUrls.roleRight + id, {}).then(res => {
      if (res.data.code != 200) {
        ElMessage.warning(res.data.data + res.data.msg);
        return;
      }
      console.log(res.data.data)

      distributionList.value = res.data.data
    }).catch(err => {
      ElMessage.error('网络错误：' + err.message);
    })


  }
  resourceStore.getResourceList()
}

defineExpose({
  show
})
</script>

<style scoped>
</style>
